<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字符串中无重复字符的最长子字符串</title>
</head>
<body>
  <input type="text" oninput="getValue()"/>
  <p>无重复字符的最长字符串的长度： <span id="maxLen"></span></p>
  <p>无重复字符的最长字符串之一： <span id="maxStr"></span></p>
  <p>无重复字符的最长字符串的集合： <span id="maxArr"></span></p>
  <script>
    function getValue() {
      const value = document.querySelector('input').value,
        maxLen = document.querySelector('#maxLen'),
        maxStr = document.querySelector('#maxStr'),
        maxArr = document.querySelector('#maxArr');
      maxLen.innerHTML = getNorepeatStrMaxLen(value);
      maxStr.innerHTML = getMaxLenNorepeatStr(value);
      maxArr.innerHTML = getMaxLenNorepeatArr(value);
    }
    function getNorepeatStrMaxLen(str) {
      let noRepeatStr = '', size = 1;
      for(let i = 0; i < str.length; i++) {
        let index = noRepeatStr.indexOf(str[i]);
        if(noRepeatStr.includes(str[i])) {
          noRepeatStr = noRepeatStr.slice(index + 1) + str[i];
        } else {
          noRepeatStr += str[i];
          size = size > noRepeatStr.length ? size : noRepeatStr.length;
        }
      }
      return size;
    }
    function getMaxLenNorepeatStr(str){
      let size = 1, boxStr = '', norepeatStr = '';
      for(let i = 0; i < str.length; i++) {
        let index = boxStr.indexOf(str[i]);
        if(boxStr.includes(str[i])) {
          boxStr = boxStr.slice(index + 1) + str[i];
        } else {
          boxStr = boxStr + str[i];
        }
        if(size < boxStr.length) {
          size = boxStr.length;
          norepeatStr = boxStr;
        }
      }
      return norepeatStr;
    }
    function getMaxLenNorepeatArr(str) {
      let size = 1, norepeatArr = [], boxStr = '';
      for(let i = 0; i < str.length; i++) {
        let index = boxStr.indexOf(str[i]);
        if(boxStr.includes(str[i])) {
          boxStr = boxStr.slice(index + 1) + str[i];
        } else {
          boxStr += str[i];
        }
        if(size <= boxStr.length) {
          size = boxStr.length;
          if(!norepeatArr.length) {
            norepeatArr.push(boxStr);
          } 
          if(norepeatArr[0].length < size) {
            norepeatArr = [boxStr];
          } else if(norepeatArr[0].length == size) {
            norepeatArr.push(boxStr);
          }
        }
      }
      return norepeatArr;
    }
  </script>
</body>
</html>